/**************** ShortTips 插件对应的样式 ****************/
.short-tips-wrapper {
  padding-top: 32vh;
  user-select: none;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;

  // 如果有遮罩层
  &.has-masklayer {
    background-color: rgba(0, 0, 0, 0.58);
    opacity: 1;
    transition: all 0.3s;
    pointer-events: all;
  }

  // 提示框主体
  .short-tips-box {
    width: max-content;
    flex: 0 0 auto;
    padding: 18px 32px;
    margin-top: 2%;
    background-image: linear-gradient(to bottom, rgba(241, 245, 250, 0.32), rgba(186, 203, 219, 0.85));
    backdrop-filter: blur(8px);
    border-radius: 7px;
    color: #3a3b3e;
    box-shadow: 0 4px 8px #0006;
    opacity: 1;
    transition: all 0.3s;
    display: flex;
    align-items: center;

    // 提示框图标
    i {
      width: 28px;
      height: 28px;
      display: inline-block;
      margin-right: 8px;
      background: center center / contain;

      // 信息图标
      &.icon-info {
        background-image: url("../images/short-tips-icons/icon-info.svg");
      }
  
      // 警告图标
      &.icon-warn {
        background-image: url("../images/short-tips-icons/icon-warn.svg");
      }
  
      // 成功图标
      &.icon-success {
        background-image: url("../images/short-tips-icons/icon-checked.svg");
      }
  
      // 失败图标
      &.icon-fail {
        background-image: url("../images/short-tips-icons/icon-error.svg");
      }
    }
  }
}
